<template>
  <div style="min-height: 500px">
    <h2>管理项目组</h2>

    <!--项目组列表-->

    <div class="div-margin20">
      <el-table
        :data="groups"
        border>
        <el-table-column
          align="center"
          prop="id"
          width="50"
          label="id">
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          width="150"
          label="名称">
        </el-table-column>
        <el-table-column
          align="center"
          prop="createTime"
          width="150"
          label="创建时间">
        </el-table-column>
        <el-table-column
          align="center"
          prop="memberCount"
          width="120"
          label="人员数量">
        </el-table-column>
        <el-table-column
          align="center"
          prop="state"
          width="120"
          label="状态">
          <template scope="scope">
            <el-tag :type="groups[scope.$index].state==='终了'?null:'success'">{{groups[scope.$index].state}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作">
          <template scope="scope">
            <el-button @click="handleView(scope.$index, scope.row)" type="primary" size="small">查看</el-button>
            <el-button v-if="groups[scope.$index].state!=='终了'" @click="handleFinish(scope.$index, scope.row)" type="danger" size="small">终了</el-button>
            <el-button v-if="groups[scope.$index].state==='终了'" @click="handleReStart(scope.$index, scope.row)"  size="small">重启</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 添加成员按钮 -->
    <div style="margin: 20px auto;">
      <el-button type="primary" @click="handleAddMember">创建项目组</el-button>
    </div>

    <!-- 对话框 -->
    <el-dialog title="创建项目组" :visible.sync="dialogFormVisible">
      <el-form v-model="form">
        <el-form-item label="项目组名称" label-width="200">
          <el-input v-model="form.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="说明" label-width="200">
          <el-input v-model="form.description" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancelCreate">取 消</el-button>
        <el-button type="primary" @click="handleConfirmCreate">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {Table, TableColumn, Button, Form, FormItem, Dialog, Input,Tag} from 'element-ui'
  import * as api_group from '../../api/group';
  import * as $ from '../../utils/HHUtil';
  export default {
    props: {},
    components: {
      'el-table': Table,
      'el-table-column': TableColumn,
      'el-button': Button,
      'el-form': Form,
      'el-form-item': FormItem,
      'el-dialog': Dialog,
      'el-input': Input,
      'el-tag': Tag
    },
    data() {
      return {
        groups: [],
        form: {
          name: '',
          description: '',
        },
        year: 2017,
        week: 43,
        dialogFormVisible: false,
      }
    },
    methods: {
      handleView(index, row) {
        let groupId = this.groups[index].id;
        this.$router.push({name: 'review', params: {userId:1, groupId, week: this.week, year: this.year + 1900}})
      },
      handleFinish(index, row) {
        let id = this.groups[index].id;
        let form = new FormData();
        form.append("id", id);
        api_group.finish(form).then(() => {
          this.refresh();
        }).catch((err) => {
          this.$message.error('无法终了项目：' + err.errmsg);
        });
      },
      handleReStart(index, row) {
        let id = this.groups[index].id;
        let form = new FormData();
        form.append("id", id);
        api_group.restart(form).then(() => {
          this.refresh();
        }).catch((err) => {
          this.$message.error('无法重启项目：' + err.errmsg);
        });
      },
      updateGroupMemberInfo() {
        api_group.getAll().then((data) => {
          this.groups = data.body;
          this.$message.success('刷新了新的数据！');
        }).catch((err) => {
          this.$message.error('刷新不到新的数据：' + err.errmsg);
        })
      },
      refresh() {
        this.updateGroupMemberInfo();
      },
      handleCancelCreate() {
        this.dialogFormVisible = false;
      },
      handleConfirmCreate() {
        api_group.create(this.form).then((data) => {
          this.$notify.success({
            title: '成功！',
            message: '创建项目组 ' + data.name + ' 成功'
          });
          this.refresh();
          this.dialogFormVisible = false;
        }).catch((err) => {
          this.$notify.error({
            title: '失败！',
            message: '请重试：' + err.errmsg
          });
        });
      },
      handleAddMember() {
        this.dialogFormVisible = !this.dialogFormVisible;
      }
    },
    created() {
      let params = this.$route.params;
      this.groupId = params.groupId;
      this.queryItem = {};
      this.year = new Date().getYear();
      this.week = $.weekOfYear(new Date());
      this.refresh();
    },
    mounted() {

    }
  }
</script>

<style>

</style>
